<template>
  <!-- 订制页 -->
  <div class="custom">
    <!-- 公共头部 -->
    <my-header></my-header>
    <div class="custom-head">
      <div class="custom-head-size">- 订制旅行 -</div>
      <p class="custom-head-p">自由·省心·有保障,好的订制,快乐游玩</p>
    </div>
    <!-- 专业团队全程服务 -->
    <div class="professional_team">
      <div class="title1">出国自由行,为什么选择游缘景行?</div>
      <div class="title2">一次自由行的费用 = 品质旅行 +</div>
      <div class="title3">专业团队全程服务</div>
      <div class="tirle-triangle"></div>
      <div class="service-box">
        <div class="service">
          <img class="service_img" src="../assets/custom/ding.jpg" alt="" />
          <div class="service-team-title">专业全职订制师团队</div>
          <div class="service-team-sub">平均在本地生活2年以上,设计过5000+条专属行程.</div>
          <div class="service-team-sub">不仅懂目的地.更懂如何自由行</div>
        </div>
        <div class="service">
          <img class="service_img" src="../assets/custom/adviser.jpg" alt="" />
          <div class="service-team-title">专属旅行顾问团队</div>
          <div class="service-team-sub">全程1v1跟进服务,不必操心行前准备</div>
          <div class="service-team-sub">让你直接联系到人,而不是层层转接的客服电话</div>
        </div>
        <div class="service">
          <img class="service_img" src="../assets/custom/protect.jpg" alt="" />
          <div class="service-team-title">专属旅行顾问团队</div>
          <div class="service-team-sub">全程1v1跟进服务,不必操心行前准备</div>
          <div class="service-team-sub">让你直接联系到人,而不是层层转接的客服电话</div>
        </div>
      </div>
    </div>
    <div class="blank"></div>
    <!-- 不跟团才自由 -->
    <div class="freedom">
      <p class="free-title">不跟团 才自由</p>
      <div class="tirle-triangle"></div>
      <p class="free-p1">想什么时候出发,</p>
      <p class="free-p2">就什么时候出发.</p>
      <div class="line-div">
        <div class="line-div-div"></div>
      </div>
      <p class="free-p3">时间, 随你定.</p>
      <img class="free-img" src="../assets/custom/mask1.png" alt="" />
      <p class="free-p1">可以睡到自然醒,</p>
      <p class="free-p2">也能暴走一整天.</p>
      <div class="line-div">
        <div class="line-div-div"></div>
      </div>
      <p class="free-p3">节奏, 随你定.</p>
      <img class="free-img" src="../assets/custom/rhythm.png" alt="" />
      <p class="free-p1">不想走马观花打卡,</p>
      <p class="free-p2">我要真正的旅行.</p>
      <div class="line-div">
        <div class="line-div-div"></div>
      </div>
      <p class="free-p3">玩法, 随你定.</p>
      <img class="free-img" src="../assets/custom/play.png" alt="" />
      <button class="public-button">免费咨询</button>
    </div>
    <div class="blank"></div>
    <!-- 一站式超省心 -->
    <div class="comfortable">
      <p class="comfortable-title">一站式 超省心</p>
      <div class="tirle-triangle"></div>
      <div class="comfortable-box">
        <img class="comfortable-img" src="../assets/custom/strategy.png" alt="" />
        <div class="comfortable-within">
          <p class="comfortable-within-p">不用辛苦看攻略、</p>
          <p class="comfortable-within-p">做预订、查签证资料.</p>
          <div class="line-div">
            <div class="line-div-div"></div>
          </div>
          <p class="comfortable-within-p1">帮你搞定一切</p>
        </div>
        <img class="mask-book-img" src="../assets/custom/book.jpg" alt="" />
        <p class="mask-p1">有路书,</p>
        <p class="mask-p1">不会外语也能轻松出国自由行.</p>
        <div class="line-div">
          <div class="line-div-div"></div>
        </div>
        <p class="mask-p2">实体路书+APP,</p>
        <p class="mask-p2">更智能, 更懂你.</p>
        <button class="public-button">查看路书</button>
      </div>
    </div>
    <div class="blank"></div>
    <div class="custom-team">
      <div class="custom-team-package">
        <p class="custom-team-package-title">专业订制团队</p>
        <div class="tirle-triangle"></div>
        <p class="custom-team-package-p">100+为资深专业定制师</p>
        <p class="custom-team-package-p">至少2年以上目的地生活经验</p>
        <p class="custom-team-package-p">懂旅行,才能给你更好的旅行</p>
      </div>
      <div class="custom-team-slide-out">
        <div class="custom-team-slide-inside">
          <div class="custom-team-slide-picture">
            <div>
              <img src="../assets/custom/customization4.jpg" alt="" style="width:260px" height="241px" />
            </div>
            <div class="custom-team-slide-text" :class="{ bottom: bottom1 }" @click="changeBottom(1)">
              <div class="custom-team-slide-effect">订制师 <span>大海</span></div>
              <p class="custom-team-slide-title">家住圣托里尼</p>
              <p class="custom-team-slide-word">
                每年夏天我都要忙着采摘葡萄，还要制作浓烈的Raki酒，花园每天也要去整理，还要拉着那头蠢蠢的驴子去买蓝色油漆，橄榄也是要摘的，到了晚上，还要去那家约好的餐厅弹奏钢琴，餐厅的味道嘛，我可从来都不推荐给谁。
              </p>
            </div>
          </div>
          <div class="custom-team-slide-picture">
            <div>
              <img src="../assets/custom/customization2.jpg" alt="" style="width:260px" height="241px" />
            </div>
            <div class="custom-team-slide-text" :class="{ bottom: bottom2 }" @click="changeBottom(2)">
              <div class="custom-team-slide-effect">订制师 <span>宋珊珊</span></div>
              <p class="custom-team-slide-title">Title不会，就酱！</p>
              <p class="custom-team-slide-word">
                她的相机里，有西雅图派克市场里桌上未干的水渍，有极具召唤力的绝美雪原与荒漠；有星空银河下神奇绿光的肆意流窜，有布拉格老城广场前喧闹的圣诞市集，有瓦伦西亚海边触手可及的满树橙子，以及哥本哈根小巷里，书店老板微笑的眼角。
              </p>
            </div>
          </div>
          <div class="custom-team-slide-picture">
            <div>
              <img src="../assets/custom/customization1.jpg" alt="" style="width:260px" height="241px" />
            </div>
            <div class="custom-team-slide-text" :class="{ bottom: bottom3 }" @click="changeBottom(3)">
              <div class="custom-team-slide-effect">订制师 <span>王鑫</span></div>
              <p class="custom-team-slide-title">别和我谈柏拉图</p>
              <p class="custom-team-slide-word">
                我可没说我是哲学家，我只是爱去什么苏格拉底、亚里士多德、阿基米德、柏拉图、蒙梭、伏尔泰他们老家八卦八卦他们而已。冰岛待久了，去其他地儿为什么总有种从外星球来的感觉呢？
              </p>
            </div>
          </div>
          <div class="custom-team-slide-picture">
            <div>
              <img src="../assets/custom/customization3.jpg" alt="" style="width:260px" height="241px" />
            </div>
            <div class="custom-team-slide-text" :class="{ bottom: bottom4 }" @click="changeBottom(4)">
              <div class="custom-team-slide-effect">订制师 <span>许曦</span></div>
              <p class="custom-team-slide-title">终·有一颗不安分的心</p>
              <p class="custom-team-slide-word">
                一个爱幻想的双鱼座菇凉终于在23岁那一年游走在了欧罗巴的板块上，只需要戴着耳机，便好像和整个世界隔离——奔驰的火车会带你去它向往的地方。随后的24岁踏上了美利坚的土地，在这里开始掌控着方向盘，随心而走！终·有一颗不安分的心，所以我想去远方，亦或是带你去远方~
              </p>
            </div>
          </div>
          <div class="custom-team-slide-picture">
            <div>
              <img src="../assets/custom/customization5.jpg" alt="" style="width:260px" height="241px" />
            </div>
            <div class="custom-team-slide-text" :class="{ bottom: bottom5 }" @click="changeBottom(5)">
              <div class="custom-team-slide-effect">订制师 <span>狄诗媛</span></div>
              <p class="custom-team-slide-title">体验不寻常的精彩旅程</p>
              <p class="custom-team-slide-word">
                本来是典型的巨蟹座乖乖女，却有一颗向往自由的心。20多岁的生命已经用心走过了15个国家。大洋路上的彩虹，双子塔上的冒险，莱茵河上的黑啤，还有匹诺曹故乡的小街小巷，水城慈祥可爱的老爷爷和Cua
                Dai海滩的春暖花开……都是专属于我的游缘景行。要不要和我一起，开启一段不一样的旅程！
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="blank"></div>
    <!-- 订制表单组件 -->
    <my-custom></my-custom>
    <br /><br />
    <!-- 页脚组件 -->
    <my-footer></my-footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bottom1: false,
      bottom2: false,
      bottom3: false,
      bottom4: false,
      bottom5: false,
    };
  },
  methods: {
    changeBottom(num) {
      if (num == 1) this.bottom1 = !this.bottom1;
      else if (num == 2) this.bottom2 = !this.bottom2;
      else if (num == 3) this.bottom3 = !this.bottom3;
      else if (num == 4) this.bottom4 = !this.bottom4;
      else this.bottom5 = !this.bottom5;
    },
  },
};
</script>
<style lang="scss">
@import './scss/custom.scss';
</style>
